<%-- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %> --%>

<!DOCTYPE HTML> <!-- PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html>
  <head>

		<%@ page language="java" pageEncoding="UTF-8"%>
		<%@ page contentType="text/html;charset=UTF-8"%>
		 <%@ taglib prefix="s" uri="/struts-tags" %>
		 <%@ taglib prefix="sec"
				uri="http://www.springframework.org/security/tags"%>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
       <title>水雨情信息发布系统</title>
        <meta content='width=device-width, initial-scale=0.5, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="../css/bootstraptable/bootstrap-table.css" rel="stylesheet" />
        <link href="../css/time/css//bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
      	 <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap3.2.js" charset="UTF-8"></script> 
		
        <script type="text/javascript" src="../js/plugins/bootstraptable/bootstrap-table.js"></script>
        <script src="../js/bootstrap-table-zh-CN.min.js"></script> 
  		 <script src="../js/highCharts/highcharts.js"></script>
		<script src="../js/highCharts/themes/grid.js"></script>
		<script src="../js/highCharts/modules/exporting.src.js"></script>
		<!-- 导出扩展 -->
   		<script type="text/javascript" src="../js/plugins/bootstraptable/bootstrap-table-export.js"></script>
   		<script src="../js/plugins/bootstraptable/tableExport.js"></script>
		 <script src="../js/plugins/bootstrapconfirmation/bootstrap-confirmation.min.js"></script>
		 
		<!--一些初始化操作 ，自定义js -->		
		<script type="text/javascript"  src="../js/monitorData/waterInfoInit.js"></script>  
		<script type="text/javascript" src = "../js/monitorData/waterInfoPage.js"></script>		
		
		<!-- 时间相关JS -->
		<script type="text/javascript" src="../css/time/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="../css/time/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>   
		<script type="text/javascript" src="../css/time/js/bootstrap-clockpicker.min.js"></script>
		<%-- 	<script src="../js/monitorData/index.js"></script>	 --%>                           		       
    </head>
    
    <body class="skin-blue">
    
      				 				  
					<section class="col-lg-12 connectedSortable" >
                                <div class="box-body ">                                  
                                    <!-- 时间查询 -->
                                  	<div class="row" id="waterLevelTime" >
										<div class="col-md-12">
												<table>
													<tr>
														<td style="padding-left:20px">时间选择：</td>
														<% java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy/MM/dd"); 
															java.util.Date currentTimeDam = new java.util.Date();//得到当前系统时间
															String str_dateDam = formatter.format(currentTimeDam); //将日期时间格式化 
															//out.println(str_date1);
															%>
													<td style="padding-top:15px">
														<div class="form-group">
															<label for="exampleInputName2"
																class=" control-label sr-only">开始时间：</label>
															<div class="input-group date form_date" id="timeTableCanal"
																style="width:200px" data-date=""
																data-date-format="dd MM yyyy"
																data-link-field="beiginTimeOfWaterLevel"  
																data-link-format="yyyy-mm-dd">
																<input class="form-control" size="10" type="text" value="<%=str_dateDam %>" readonly>
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-remove"></span> </span> 
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-calendar"></span> </span>
															</div>
															
															<input type="hidden" id="beiginTimeOfWaterLevel"  value="<%=str_dateDam %>" />

														</div></td>
														<td>~</td>
												            <td style="padding-top:15px">
														<div class="form-group">
															<label for="exampleInputName2" class=" control-label sr-only">开始时间：
															</label>
															
															<div class="input-group date form_date" id="timeTable"
															style="width:200px" data-date="" data-date-format="dd MM yyyy"
															data-link-field="endTimeOfWaterLevel" data-link-format="yyyy-mm-dd">
																<input class="form-control" size="10" type="text"  value="<%=str_dateDam %>" readonly>
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-remove"></span> </span> 
																	 <span class="input-group-addon">
																	 <span class="glyphicon glyphicon-calendar"></span> </span>
															</div>								
																<input type="hidden" id="endTimeOfWaterLevel"  value="<%=str_dateDam %>" />
														</div>
													</td>
																																										
													<td style="padding-left:20px">类型选择：</td>
													<td >
                   										 <select name="selectType" style="height:34px;" id="selectType" >
                       												 <option value="压力">压力</option>
                       												 <option value="流量">流量</option>
                        											<option value="余氯">余氯</option>      	 
                        											<option value="浊度">浊度</option>
                   										 </select>
                									</td>
                								
                								
                								<td><button  id="waterInfoBotton" class="btn btn-default" style="margin-left:20px;">查询</button></td>												 
													
													</tr>
												</table>
														
											 
										</div>
										</div>       <!-- row -->
										<div class ="row" style="margin-left:20px;margin-right:20px;" id="waterLevelData" >	 						                                    	
											<h3 align="center" id= "waterStationNameId"> 
											<font ><s:property value="waterStationName"/><s:property value="dataType"/>压力表</font></h3>                        					
                       						<!-- 表格数据显示 -->   
											<div class="table-responsive" align="center" >
                         					 <%-- 分页属性 data-pagination="true"--%>
                              				 <table data-toggle="table" style="white-space: nowrap; text-align:center" class="table table-hover table-striped table-bordered table-condensed" id="waterLevleInfoTable"  data-cache="false"  
                               						 data-search="true" data-select-item-name="toolbar1" 
                                						data-pagination="true"  data-page-list="[5,10,20,50]"  data-show-export= "true">	
												<thead>
                                  					<tr>           
                                       					<th data-field="stationnum" data-sortable="true" data-align="center">站点名称</th>
                                       					<th data-field="time" data-sortable="true" data-align="center">时间</th>
                                       					<!-- 动态修改列名 -->
                                       					<th data-field="value" data-sortable="true" data-align="center"><font id="valueTypeInTable">压力(MPa)</font></th>
                                       					
                                  					 </tr>
                                  				</thead>
                       
                              				 </table><!-- /.table-->  
											</div>	
											<div class = "row" style="margin-top: 20px">	
												<!-- 图像显示 -->
												<div class="col-md-12 connectedSortable" >
												<!-- 折线图 -->		
												<h3 align="center" id="highChartsName"><font ><s:property value="waterStationName"/><s:property value="dataType"/>折线图</font>	</h3>								
												<div id="waterInfoContainer" style="min-width:100%;height:60%;"></div>
                       
											 	</div>
											
											</div>								
                           			
									</div>	<!-- Row -->
									
									<div id="noData" style="display:none">
									<h2 align="center">该点没有所选类型数据，或者所选时间选没有所选类型数据，请重新选择……</h2>
									
									</div>
                         		
								</div><!-- /.box-body -->
				 			
					</section>
    </body>
 
</html>